<template>
	
	<view class="container">
		<!--历史会话-->
		<u-popup :show="historyVisible" safeAreaInsetTop="true" mode="left" @close="closeHistory">
			<view class="history-wraper">
				<view style="display: flex; width:300px;">
					<view style="padding: 0px 10px;">
						<u-icon name="arrow-left" size="20" @click="historyVisible=false"></u-icon>
					</view>
					<view style="font-size: 14px; flex:1; text-align: center;padding-right:5px">历史会话</view>
				</view>
				<view style="padding: 0px 20px;">
					<view>
						<view class="history_section">今天</view>
						<view style="margin-bottom: 10px;">
							<view>拖拉机的组成部分</view>
						</view>
					</view>
					<view>
						<view class="history_section">昨天</view>
						<view style="margin-bottom: 10px;">
							<view>2013年农业机械购置补贴实施指导意见</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	
		<!--导航栏-->
		<u-navbar leftText="清单" title="耒耜AI" :safeAreaInsetTop="true" @leftClick="leftClick">
			<view class="u-nav-slot" slot="left">
				<u-icon name="list-dot" size="26"></u-icon>
			</view>
		</u-navbar>
	
		<view style="content-wraper">
			<!--对话内容主体 -->
			<view style="flex: 1;">
				<view v-for="(item,index) in messages" :key="index"
					:style="{'padding-bottom':messages.length-1===index?'2rem':'none'}">
					<view v-if="item.sender=='ai'" class="chat-message-ai">
						<!--头像-->
						<view style="display: flex; line-height: 35px;height:35px;">
							<u-image src="/static/logo.png" width="30px" height="30px"></u-image>
							<text>耒耜AI小助手</text>
						</view>
						<view class="content-wraper-ai">
							<rich-text :nodes="item.content"></rich-text>
						</view>
					</view>
	
					<view v-if="item.sender=='me'" class="chat-message-me">
						<!--头像-->
						<view class="content-wraper-me">
							<rich-text :nodes="item.content"></rich-text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="footer-wraper">
				<chatInput @send="handleSendText"></chatInput>
			</view>
	
		</view>
	
	
	</view>
	
	
	<!--
	<view class="container">
		<u-navbar leftText="返回" title="耒耜AI" :safeAreaInsetTop="true" @leftClick="leftClick">
			<view class="u-nav-slot" slot="left">
				<u-icon name="list-dot" size="26"></u-icon>
			</view>
		</u-navbar>

		<view class="content-wraper">
			<view style="flex: 1;">
				<view style="text-align: center; padding-bottom: 25px;">
					<image class="logo" src="/static/logo.png"></image>
					<view style="text-align: center; ">
						<text style="font-size: 20px;">耒耜AI大模型</text>
					</view>
				</view>
		 
				<view class="news-wraper">
					<view class="news-header">
						<text style="flex:1;">每日精选</text>
						<text>11.13</text>
						<text style="padding: 0px 5px; margin: 0px 5px;">日</text>
					</view>
					<view>
						<view style="news_list" v-for="(item,index) in newsdata.list" :key="index">
							<view class="news-item">
								<view>{{index+1}}. </view>
								<view class="news-title">{{item.title}}</view>
							</view>
						</view>
					</view>
				</view>



				
			</view>
			<view class="footer-wraper">
				<chatInput @send="handleSendText"></chatInput>
			</view>
		</view>


		<u-popup :show="historyVisible" safeAreaInsetTop="true" mode="left" @close="closeHistory" @open="openHistory">
			<view class="history-wraper">
				<view style="display: flex; width:300px;">
					<view style="padding: 0px 10px;">
						<u-icon name="arrow-left" size="20" @click="historyVisible=false"></u-icon>
					</view>
					<view style="font-size: 14px; flex:1; text-align: center;padding-right:5px">历史会话</view>
				</view>
				<view style="padding: 0px 20px;">
					<view>
						<view class="history_section">今天</view>
						<view style="margin-bottom: 10px;">
							<view>拖拉机的组成部分</view>
						</view>
					</view>
					<view>
						<view class="history_section">昨天</view>
						<view style="margin-bottom: 10px;">
							<view>2013年农业机械购置补贴实施指导意见</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	-->
	</view>
</template>

<script>
	import chatInput from '@/components/chatInput.vue'
	export default {
		components: {
			chatInput,
		},
		data() {
			return {
				historyVisible: false,
				newsdata: {
					date: '11.30',
					week: '六',
					list: [{
							newsid: 1,
							title: "全国科普日｜AI助力新农业：从靠天吃饭到智能生产"
						},
						{
							newsid: 2,
							title: "打造北方农业智能装备研发制造高地"
						},
						{
							newsid: 3,
							title: "农业机械行业智能化农机装备研发  "
						},
						{
							newsid: 4,
							title: "农用收割机结构设计"
						}
					]
				}
			}
		},
		methods: {
			leftClick: function() {
				this.historyVisible = true;
			},
			closeHistory() {
				this.historyVisible = false;
			},
			openHistory() {

			}
		}
	}
</script>

<style scoped>
	.logo {
		width: 128px;
		height: 128px;
		margin-left: auto;
		margin-right: auto;
	}

	.title {
		font-size: 36rpx;
		color: #3c3c3e;
		font-weight: bold;
	}


	.news-wraper {
		background-color: #f3f3f3;
		margin: 20px;
		border-radius: 10px;
		padding: 10px;
	}

	.news-header {
		display: flex;
		font-style: italic;
		margin-bottom: 5px;
	}

	.news-item {
		height: 35px;
		line-height: 35px;
		border-bottom: 1px solid #e8e8e8;
		display: flex;
	}

	.news-title {
		width: 100%;
		/* 定义容器宽度 */
		white-space: nowrap;
		/* 保持文本在一行内显示 */
		overflow: hidden;
		/* 隐藏超出容器的内容 */
		text-overflow: ellipsis;
		/* 使用省略符号表示被截断的文本 */
		padding-left: 5px;
	}

	.history-wraper {
		padding-top: 20px;
	}

	.history_section {
		line-height: 30px;
		height: 30px;
		font-weight: bold;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding-top: 24%;
		overflow: hidden;
	}
	
	.content-wraper {
		border: 1px solid #FF0000;
		flex: 1;
		overflow: auto;
		padding-top: 24%;
	}
	
	.footer-wraper{
		border: 1px solid #ffffff;
		position: sticky;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fefefe;
		color: #fff;
		text-align: center;
	}
</style>